<template>
  <div id="app">
    <!-- <div class="header">头部</div> -->

    <!-- 命名视图(默认是同级) => 对应路由地址,在不同的router-view中展示不同的内容(组件)   
       1. 创建多个router-view 命名视图(默认是同级) 
       2. 将视图中展示的内容抽离为组件
       3. 在路由配置中, 定义不同的路由地址,展示不同的视图(单个或多个)
    
    -->
    <!-- 一级视图 -->
    <router-view name="header"></router-view>
    <router-view name="default" class="main"></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

<style>
/* 
      scoped 配置
      如果不加 scoped属性 -> 此样式默认全局的,对所有页面生效
      如果添加了 scoped属性 -> 只对当前页面生效
    */


html {
  /* 设置rem:  1rem=100px(设计图) */
  font-size: -webkit-calc(100vw/7.5);
}

body {
  font-size: 0.24rem;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#app .main {
  flex: 1;
  overflow-y: auto;
}

#app .header{
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  border-bottom: 1px solid #707070;
  align-items: stretch;
}

#app .footer {
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  display: flex;
  border-top: 1px solid #707070;
}


#app .footer a,
#app .footer li {
  flex: 1;
}


/* 关于活跃状态的样式 */

/* router-link 包含匹配时的活跃状态的类名 */
/* .router-link-active,.active-aaa{
  color: #fff;
  background-color: #6ff;
} */
/* router-link 精准匹配时 的活跃状态的类名 */
.router-link-exact-active,
.exact-active-aaa {
  color: #fff;
  background-color: #f00;
}
</style>
